<%@ Page Language="C#" AutoEventWireup="true" CodeFile="demoFixed_Header_Footer.aspx.cs" Inherits="CSS_Fixed_Header_Footer_demoFixed_Header_Footer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<title>CSS Layout - 100% height</title>
  <link href="layout.css" rel="stylesheet" type="text/css" />
<meta name="chromesniffer" id="chromesniffer_meta" content="Google%20Analytics=-1&amp;"><script type="text/javascript" src="chrome-extension://homgcnaoacgigpkkljjjekpignblkeae/detector.js"></script></head>
<body>

	<div id="container">

		<div id="header">
			<p>Sometimes things that used to be really simple with tables can still appear pretty hard with CSS. This layout for instance would consist of 3 cells; two with a fixed height, and a third one in the center filling up the remaining space. Using CSS, however, you have to take a different approach.</p>
		</div>

		<div id="content">
			<h2>Min-height</h2>
			<p>
				The #container element of this page has a min-height of 100%. That way, if the content requires more height than the viewport provides, the height of #content forces #container to become longer as well. Possible columns in #content can then be visualised with a background image on #container; divs are not table cells, and you don't need (or want) the fysical elements to create such a visual effect. If you're not yet convinced; think wobbly lines and gradients instead of straight lines and simple color schemes.
			</p>
			<h2>Relative positioning</h2>
			<p>
				Because #container has a relative position, #footer will always remain at its bottom; since the min-height mentioned above does not prevent #container from scaling, this will work even if (or rather especially when) #content forces #container to become longer.
			</p>
			<h2>Padding-bottom</h2>
			<p>
				Since it is no longer in the normal flow, padding-bottom of #content now provides the space for the absolute #footer. This padding is included in the scrolled height by default, so that the footer will never overlap the above content.
			</p>
			<p>
				Scale the text size a bit or resize your browser window to test this layout. The <a href="css/layout1.css">CSS file is over here</a>.
			</p>
			<p>
				<a href="../css.html">Back to CSS Examples</a>
			</p>
		</div>

		<div id="footer">
			<p>
				This footer is absolutely positioned to bottom:0; of  #container. The padding-bottom of #content keeps me from overlapping it when the page is longer than the viewport.
			</p>
		</div>
	</div>


	

</body></html>
